<template>
  <div class="create_warning">
    <!-- 折叠面板 -->
    <el-form
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item prop="name" label="预警名称">
        <el-input
          size="small"
          v-model="ruleForm.name"
          placeholder="请输入预警名称（最多20个字)"
        ></el-input>
      </el-form-item>
      <el-form-item prop="bz" label="备注">
        <el-input size="small" placeholder="选填" v-model="ruleForm.bz"></el-input>
      </el-form-item>
      <el-form-item prop="grounp" label="广告系列组">
        <el-select v-model="value" placeholder="请选择广告系列组" size="small">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="jkObj" label="监控对象">
        <el-radio-group v-model="radioObj">
          <el-radio :label="1">广告系列</el-radio>
          <el-radio :label="2">广告组</el-radio>
        </el-radio-group>
        <el-cascader
          :options="optionsObj"
          :props="{ multiple: true }"
          size="small"
          clearable
          style="display: block"
        >
        </el-cascader>
        <el-cascader
          v-if="radioObj === 2"
          :options="optionsObj"
          :props="{ multiple: true }"
          size="small"
          clearable
          style="display: block; margin-top: 12px"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="监控频率">
        <div style="display: flex">
          <el-select v-model="valueTime" size="small" style="width: 150px">
            <el-option
              v-for="item in optionsTime"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="valueTimeZone"
            size="small"
            style="width: 150px; margin-left: 10px"
          >
            <el-option
              v-for="item in optionsTimeZone"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="触发条件">
        <span
          v-if="optionsTriggers1.length < 5"
          @click="addChoose"
          style="display: block; position: absolute; right: 30px; top: -40px"
          >+添加条件</span
        >
        <div>
          <label>如果</label>
          <el-select
            v-model="valueTriggers"
            size="small"
            style="width: 150px; margin-left: 10px; margin-right: 10px"
          >
            <el-option
              v-for="item in optionsTriggers"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <label>则发送通知</label>
        </div>
        <div v-for="(index, i) in optionsTriggers1" :key="i">
          {{ $data.optionsTriggers1[i].target }}
          <el-select
            v-model="$data.optionsTriggers1[i].target"
            size="small"
            style="width: 100px"
          >
            <el-option
              v-for="item in index.one"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="$data.optionsTriggers1[i].contrast"
            size="small"
            style="width: 100px; margin-left: 10px"
          >
            <el-option
              v-for="item in index.two"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="$data.optionsTriggers1[i].contrastValue"
            size="small"
            style="width: 100px; margin-left: 10px"
          >
            <div
              v-if="valueTime === 1 && $data.optionsTriggers1[i].target === 1"
            >
              <el-option
                v-for="item in index.four"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </div>
            <div
              v-else-if="
                valueTime === 1 && $data.optionsTriggers1[i].target !== 1
              "
            >
              <el-option
                v-for="item in index.three"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </div>
            <div
              v-else-if="
                valueTime === 2 && $data.optionsTriggers1[i].target === 1
              "
            >
              <el-option
                v-for="item in index.six"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </div>
            <div
              v-else-if="
                valueTime === 2 && $data.optionsTriggers1[i].target !== 1
              "
            >
              <el-option
                v-for="item in index.five"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </div>
            <div
              v-else-if="
                valueTime === 3 && $data.optionsTriggers1[i].target === 1
              "
            >
              <el-option
                v-for="item in index.seven"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </div>
            <div
              v-else-if="
                valueTime === 3 && $data.optionsTriggers1[i].target !== 1
              "
            >
              <el-option
                v-for="item in index.nine"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </div>
          </el-select>
          <el-input
            placeholder="请输入内容"
            size="small"
            class="select_symbol"
            v-model="$data.optionsTriggers1[i].value"
            @blur="inputValida($data.optionsTriggers1[i].value)"
            style="width: 120px; margin-left: 10px; margin-top: 4px"
          >
          </el-input>
          <el-select v-model="$data.optionsTriggers1[i].symbolValue" size="small" style="width: 60px">
            <div v-if="$data.optionsTriggers1[i].target !== 1">
              <el-option
                v-for="item in index.symbolSelect"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </div>
            <div v-else>
              <el-option
                v-for="item in index.symbolSelect1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </div>
          </el-select>
          <em @click="deleteChoose(i)">删除</em>
        </div>
      </el-form-item>
      <el-form-item prop="email" label="通知配置">
        <el-checkbox-group v-model="checkList">
          <el-checkbox :label="1">系统通知</el-checkbox>
          <el-checkbox :label="2">邮件通知</el-checkbox>
        </el-checkbox-group>
        <el-input
          v-if="checkList.includes(2)"
          size="small"
          placeholder="请输入邮箱地址"
        ></el-input>
      </el-form-item>
      <div>
        <el-button class="cancel-btn defult">取消</el-button>
        <el-button type="success" size="samll" @click="createYJ('ruleForm')">确定</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import {isValidNumber} from '@/utils/validate'
export default {
  data() {
    const validateName = (rule, value, callback) => {
      if(!value) {
        return callback(new Error('请输入预警名称'))
      } else if (value.length > 20) {
        return callback(new Error('预警名称不得超过20个字'))
      } else {
        callback()
      }
    };
    const validateBZ = (rule, value, callback) => {
      if(!value) {
        return callback()
      } else if (value.length > 20) {
        return callback(new Error('备注不得超过20个字'))
      } else {
        callback()
      }
    };
    return {
      value: "",
      checkList: [1, 2],
      valueTime: 3,
      valueTimeZone: 0,
      valueTriggers: 0,
      radioObj: 1,
      select: 1,
      optionsObj: [
        {
          value: 1,
          label: "东南",
          children: [
            {
              value: 2,
              label: "上海",
              children: [
                { value: 3, label: "普陀" },
                { value: 4, label: "黄埔" },
                { value: 5, label: "徐汇" },
              ],
            },
          ],
        },
      ],
      options: [
        {
          value: "1",
          label: "广告系列组1",
        },
        {
          value: "2",
          label: "广告系列组2",
        },
      ],
      optionsTime: [
        {
          value: 1,
          label: "每天",
        },
        {
          value: 2,
          label: "每小时",
        },
        {
          value: 3,
          label: "实时",
        },
      ],
      optionsTimeZone: [
        {
          value: 0,
          label: "UTC时区",
        },
        {
          value: -8,
          label: "亚洲/上海",
        },
      ],
      optionsTriggers: [
        { value: 0, label: "满足以下任一条件" },
        { value: 1, label: "满足以下所有条件" },
      ],
      optionsTriggers1: [
        {
          target: 1,
          contrast: 0,
          contrastValue: 0,
          symbolValue: 0,
          value: '',
          one: [
            { value: 0, label: "花费" },
            { value: 1, label: "安装" },
            { value: 2, label: "cpt" },
            { value: 3, label: "cpa" },
          ],
          two: [
            { value: 0, label: "高于" },
            { value: 1, label: "低于" },
          ],
          three: [
            { value: 0, label: "金额" },
            { value: 1, label: "昨天" },
            { value: 2, label: "上周同期" },
          ],
          four: [
            { value: 0, label: "次数" },
            { value: 1, label: "昨天" },
            { value: 2, label: "上周同期" },
          ],
          five: [
            { value: 0, label: "金额" },
            { value: 1, label: "上一小时" },
            { value: 2, label: "昨天同期" },
          ],
          six: [
            { value: 0, label: "次数" },
            { value: 1, label: "上一小时" },
            { value: 2, label: "昨天同期" },
          ],
          seven: [{ value: 0, label: "次数" }],
          nine: [{ value: 0, label: "金额" }],
          symbolSelect: [{
              value: 0,
              label: this.$store.state.user.unit === "USD" ? "$" : "￥",
            },
            {
              value: 1,
              label: "%",
          }],
          symbolSelect1: [{
            value: 0,
            label: "次",
          },
          {
            value: 1,
            label: "%",
          }],
        },
        {
          target: 3,
          contrast: 1,
          contrastValue: 0,
          symbolValue: 0,
          value: '',
          one: [
            { value: 0, label: "花费" },
            { value: 1, label: "安装" },
            { value: 2, label: "cpt" },
            { value: 3, label: "cpa" },
          ],
          two: [
            { value: 0, label: "高于" },
            { value: 1, label: "低于" },
          ],
          three: [
            { value: 0, label: "金额" },
            { value: 1, label: "昨天" },
            { value: 2, label: "上周同期" },
          ],
          four: [
            { value: 0, label: "次数" },
            { value: 1, label: "昨天" },
            { value: 2, label: "上周同期" },
          ],
          five: [
            { value: 0, label: "金额" },
            { value: 1, label: "上一小时" },
            { value: 2, label: "昨天同期" },
          ],
          six: [
            { value: 0, label: "次数" },
            { value: 1, label: "上一小时" },
            { value: 2, label: "昨天同期" },
          ],
          seven: [{ value: 0, label: "次数" }],
          nine: [{ value: 0, label: "金额" }],
          symbolSelect:[{value: 0,label: this.$store.state.user.unit === "USD" ? '$' : '￥'},{value: 1,label: '%'}],
      symbolSelect1:[{
        value: 0,
        label: '次'
      },{
        value: 1,
        label: '%'
      }]
        },
        {
          target: 2,
          contrast: 0,
          contrastValue: 0,
          symbolValue: 0,
          value: '',
          one: [
            { value: 0, label: "花费" },
            { value: 1, label: "安装" },
            { value: 2, label: "cpt" },
            { value: 3, label: "cpa" },
          ],
          two: [
            { value: 0, label: "高于" },
            { value: 1, label: "低于" },
          ],
          three: [
            { value: 0, label: "金额" },
            { value: 1, label: "昨天" },
            { value: 2, label: "上周同期" },
          ],
          four: [
            { value: 0, label: "次数" },
            { value: 1, label: "昨天" },
            { value: 2, label: "上周同期" },
          ],
          five: [
            { value: 0, label: "金额" },
            { value: 1, label: "上一小时" },
            { value: 2, label: "昨天同期" },
          ],
          six: [
            { value: 0, label: "次数" },
            { value: 1, label: "上一小时" },
            { value: 2, label: "昨天同期" },
          ],
          seven: [{ value: 0, label: "次数" }],
          nine: [{ value: 0, label: "金额" }],
          symbolSelect:[{value: 0,label: this.$store.state.user.unit === "USD" ? '$' : '￥'},{value: 1,label: '%'}],
          symbolSelect1:[{
          value: 0,
          label: '次'
         },{
        value: 1,
        label: '%'
        }]
        },
      ],
      ruleForm: {
        name: '',
        bz: '',
        money: ''
      },
      rules:{
        name:[
          { required: true, message: '请输入预警名称', trigger: 'blur' },
          { min: 1, max: 20, message: '预警名称不得超过20个字', trigger: 'blur' }
        ],
        bz:[
          {validator: validateBZ, trigger: 'blur'}
        ],
        grounp:[
           { required: true, message: '请选择广告系列组', trigger: 'blur' }
        ],
        jkObj:[
           { required: true, message: '请选择', trigger: 'blur' }
        ],
        email:[
           { required: true, message: '请输入邮箱', trigger: 'blur' }
        ],
        tj:[
           { required: true, message: '请输入', trigger: 'blur' }
        ],
      }
    };
  },
  computed: {
    // isSymbol(){
    //   let unit = this.$store.state.user.unit;
    //   return unit === "USD" ? '$' : '￥'
    // }
  },
  methods: {
    // 删除触发条件
    deleteChoose(index) {
      console.log(index);
      this.optionsTriggers1.splice(index, 1);
      console.log(this.optionsTriggers);
    },
    // 添加条件
    addChoose() {
      this.optionsTriggers1.push({
        target: 3,
        contrast: 0,
        contrastValue: 0,
        one: [
          { value: 0, label: "花费" },
          { value: 1, label: "安装" },
          { value: 2, label: "cpt" },
          { value: 3, label: "cpa" },
        ],
        two: [
          { value: 0, label: "高于" },
          { value: 1, label: "低于" },
        ],
        three: [
          { value: 0, label: "金额" },
          { value: 1, label: "昨天" },
          { value: 2, label: "上周同期" },
        ],
        four: [
          { value: 0, label: "次数" },
          { value: 1, label: "昨天" },
          { value: 2, label: "上周同期" },
        ],
        five: [
          { value: 0, label: "金额" },
          { value: 1, label: "上一小时" },
          { value: 2, label: "昨天同期" },
        ],
        six: [
          { value: 0, label: "次数" },
          { value: 1, label: "上一小时" },
          { value: 2, label: "昨天同期" },
        ],
      });
    },
    // 创建预警
    createYJ(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) return console.log(1)
      })
    },
    inputValida(data) {
      this.$message.closeAll()
      console.log(data)
      // let reg = /[^\d]/g
      // 只能输入正负整数和小数
      let reg = /^(\+\d+|\d+|\-\d+|\d+\.\d+|\+\d+\.\d+|\-\d+\.\d+)$/
      if (!reg.test(data)) return this.$message.error('请输入正确数值')
    }
  },
};
</script>

<style lang="scss" scoped>
div /deep/.select_symbol .el-input__inner {
  border-right: 0px solid #dcdfe6 !important;
  border-top-right-radius: 0px !important;
  border-end-right-radius: 0px !important;
}
.create_warning {
  margin-top: 20px;
  margin-left: 24px;
  width: 100%;
  .el-input {
    width: 300px;
  }
  .el-select {
    width: 300px;
  }
  .el-cascader {
    width: 300px;
  }
}
</style>
